<template>
  <div>
    <x-header :left-options="{showBack: false}">
      首页
      <div slot="right" v-if="isLogin">
        <span>{{username}}</span>
      </div>
      <div slot="right" v-else>
        <router-link to='/login'>登陆</router-link>
        <router-link to='/login?register=1'>注册</router-link>
      </div>
    </x-header>
    <search position="absolute" @on-focus="onFocus" ref="search"></search>
    <swiper :aspect-ratio="300/800" auto loop>
      <swiper-item class="swiper-demo-img" v-for="(item, index) in swipList" :key="index">
        <img :src="item.url" style="height:100%">
      </swiper-item>
    </swiper>
    <div class="products">
      <grid :cols="2" :show-lr-borders="false" :show-vertical-dividers="false">
        <grid-item v-for="item in productList" :key="item.id" class="productItem" :link="'/detail?id='+item.id">
          <img :src="item.url" style="width:100%">
          <p class="name">{{item.name}}</p>
          <p class="count">{{item.count}}</p>
          <p class="price">¥{{item.price}}</p>
        </grid-item>
      </grid>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      isLogin: false, //判断用户是否登陆
      username: sessionStorage.getItem('username'),   //用户名
      //轮播图
      swipList: [
        { id: 1, url: 'assets/banner1.jpg' },
        { id: 2, url: 'assets/banner2.jpg' },
        { id: 3, url: 'assets/banner3.jpg' },
        { id: 4, url: 'assets/banner4.jpg' }
      ],
      //推荐产品列表
      productList: [
        { id: 1, name: '粉色多头康乃馨', count: '10支(多头)', price: '58', url: 'assets/flower1.jpg' },
        { id: 2, name: '红色多头康乃馨', count: '20支(多头)', price: '68', url: 'assets/flower2.jpg' },
        { id: 3, name: '白色多头玫瑰花', count: '11支(多头)', price: '78', url: 'assets/flower3.jpg' },
        { id: 4, name: '蓝色色多头玫瑰花', count: '12支(多头)', price: '88', url: 'assets/flower4.jpg' },
        { id: 5, name: '蓝色色多头玫瑰花', count: '12支(多头)', price: '88', url: 'assets/flower4.jpg' },
        { id: 6, name: '蓝色色多头玫瑰花', count: '12支(多头)', price: '88', url: 'assets/flower4.jpg' },
      ],
    }
  },
  methods: {
    onFocus() {
      this.$router.push({ path: '/search' });
    }
  },
  mounted() {
    if (sessionStorage.getItem('username')) {
      this.isLogin = true;
    }
    // this.$http.post('http://localhost:3500/product/hostList',{},{}).then(res=>{
    //   console.log(res);
    // }).catch(err=>{
    //   console.log(err)
    // })
  }
}
</script>

<style lang="less" scoped>
.products {
  margin-bottom: 60px;
}
.weui-grid:after {
  display: none;
}
.productItem {
  .name {
    font-size: 14px;
  }
  .count {
    font-size: 12px;
    color: #8a8a8a;
  }
  .price {
    font-size: 12px;
    color: #ffa534;
  }
}
</style>

